<template>
  <view class="shoppingBox">
    <view class="headBackGround">
      <image src="https://www.zjjqf.cn/file/static/scbg.png"></image>
    </view>
    <categoryBox @setCategory="setCategory" @search="jump('searchGoods')" v-show="showCategoryBox" :typeList="goodsOneType"></categoryBox>
    <!-- <shopping-cart  v-if="type!=='3'" :order="order" :news="news" :selectedGoodsList="selectedGoodsList" :photo="photo" :back="back"></shopping-cart>
    <stock :addstocklist="addstocklist" v-if="type=='3'" :type="type" :news="news" :photo="photo" :back="back"></stock> -->
    <shopping-cart  v-if="type !=='3' ||type !=='5'" :selectedGoodsList="selectedGoodsList" :news="news" :type="type" :order="order" :photo="photo" :customerId="customerId" :back="back"></shopping-cart>
    <stock :addstocklist="addstocklist" @upstock="upstock" :customerId="customerId" v-if="type=='3' || type=='5'" :type="type"  :news="news" :order="order" :photo="photo"></stock>
    <view class="mask mask99" @tap="showCategoryBox = false" v-show="showCategoryBox"></view>
    <view class="head">
      <view class="top">
        <view class="customer flex flex-row">
          <view @tap="backs"><span class="down"><image class="downImage back" src="https://www.zjjqf.cn/file/static/down.png"/></span></view>
          <view @click="jump('customer')">
            {{ customerName }}
          </view>
          <span class="down"><image class="downImage" src="https://www.zjjqf.cn/file/static/down.png"/></span>
        </view>
        <view style="margin-top: 50rpx">
          <goodsTypeList @change="changeType" :goodsTypeIndex="goodsTypeIndex" @clickAll="showCategoryBox = true" :goods-types="goodsOneType"></goodsTypeList>
        </view>
      </view>
    </view>
    <view class="content flex flex-row" :style="{height:contentHeight + 'px'}">
      <view class="left">
        <scroll-view :scroll-top="scrollTop" :style="{height: contentHeight + 'px'}" scroll-y="true" class="scroll-Y">
          <type-menu :selectIndex.sync="currentTypeIndex" :types="brandList" @change="setGoodsType"></type-menu>
        </scroll-view>
      </view>
      <view class="right">
        <scroll-view @scrolltolower="queryData" :scroll-top="scrollTop" :style="{height: contentHeight + 'px'}" scroll-y="true" class="scroll-Y">
          <goods-card @selectGoods="selectGoods" v-for="item in goodsList" :goods="item"></goods-card>
          <view style="width: 100%;height: 210rpx"/>
        </scroll-view>
      </view>
    </view>

    <uni-popup   maskBackgroundColor="rgba(69,64,68,.6)"  ref="popup" type="bottom"  :animation="true">
      <select-goods
          :currentPromotionId.sync="currentPromotionId"
          @addGoods.sync="addGoods"
          @addstock.sync="addstock"
          @subPromotionList="subPromotionList"
          :customer-id="customerId"
          :goods.sync="currentGoods"
          :params="query" :type="type"
          @close="close"></select-goods>
    </uni-popup>
    <!--遮罩-->
    <!-- <view class="mask" @touchmove.stop.prevent="" @tap="close" @close="close" v-if="mask">
      <view></view>
    </view>
  </view> -->
  </view>
</template>

<script>
import Search from "../../components/search";
import {debounce, getScreen} from "../../service/auth";
import typeMenu from "../../components/typeMenu";
import {basGoodsListForAdd, childBasGoodsTypeList, getBasGoodsBrandS} from "../../service/api/shopping";
import goodsCard from "../../components/goodsCard";
import goodsTypeList from "../../components/goodsTypeList";
import selectGoods from "../../components/selectGoods";
import shoppingCart from "../../components/shoppingCart";
import stock from "../../components/stock";
import categoryBox from "../components/categoryBox";
import {getBasGoodsTypeTree} from "../../service/api/dropDown";

export default {
  name: "shopping",
  components: {Search, typeMenu, goodsCard, goodsTypeList, selectGoods, shoppingCart, categoryBox,stock},
  created() {
    const {width,height} = getScreen()
    this.contentHeight = height - (290 * width / 750)
    // this.getGoodsType()
    const app = getApp()
    // app.globalData.shoppingCart = this.selectedGoodsList
    this.selectedGoodsList = app.globalData.shoppingCart||[]
    this.addstocklist = app.globalData.addstocklist||[]
  },
  onLoad(option){
    this.photo=option.photo
    this.type=option.type
    this.news=option.news
    this.order=option.order
    this.tabbar = option.tabbar
    if(option.typeId !== undefined)
      this.typeCallbackList.push(this.setMethod(option))
    this.getGoodsTypeOne()
  },
  onShow(){
    const app = getApp()
    const {id, name} = app.globalData.selectedPosition
    this.$forceUpdate()
    if(this.customerId === id)return
    this.customerId = id
    this.customerName = name
    this.init()
    this.customerId && this.onGet()
  },
  data(){
    return{
      customerId: null,
      //一级分类指针
      goodsTypeIndex:0,
      //末级分类指针
      currentTypeIndex: 0,
      //分类
      showCategoryBox:false,
      customerName: '请先选择客户',
      sCustomerId: null,
      scustomerId: null,
      scustomerName: '请先选择二批',
      contentHeight: 0,
      shoppingCartGoods:[],
      mask: false,
      typeList:[],
      goodsOneType:[],
      currentGoods:{},
      goodsList: [],
        brandList:[],
      selectedGoodsList: [],
      addstocklist: [],
      currentPromotionId: -1,
      end: false,
      query:{
        page: 1,
        size: 20,
        goodsTypeIds:'',
        type: 'SALE',
        isIgnoreZeroUnGiftGoodsCount: 1,
        isAppletSale:1,
        scope:0,
        ignoreGoodsTagNames:'回瓶回箱,瓶盖'
      },
      paths:{
        customer: '/pages/saleplace/index',
        searchGoods: '/pageShopping/search/index'
      },
      typeCallbackList:[],
      type:'',
      news:'',
        goodsBrandIds:'',
      order:'',
      source:'',
      tabbar:null,
      photo:'',
      back:'',
    }
  },
  methods:{
    setMethod(option ){
      let privateOption = Object.assign({},option)
      return function (){
        if (privateOption.typeId === 'all'){
          this.showCategoryBox = true
          return
        }

        const index = this.goodsOneType.findIndex(item=>item.id.toString() === privateOption.typeId)
        if (~index){
          this.goodsTypeIndex = index
        }
      }
    },
    onGet:debounce(function (){
      uni.showLoading({title:'加载中'})
      if(!this.customerId)return uni.showToast({title:'请先选择客户',icon:'none'})
      if (!this.query.goodsTypeIds)return
      const data = {
        customerId: this.customerId,
        ...this.query
      }
      basGoodsListForAdd(data).catch(err=>{
        uni.hideLoading()
        if (err.content.length < this.query.size)this.end = true
        this.goodsList = [...this.goodsList,...err.content]
      })
    },300),
    jump(ty) {
      console.log(this.order,'kkkkkkkk');
      this.showCategoryBox = false
      uni.navigateTo({url:`${this.paths[ty]}?type=${this.type}&&order=${this.order}&&news=${this.news}`})
    },
    getGoodsType(pid='') {
      childBasGoodsTypeList({pid,size:999}).catch(err=>{
        this.typeList = err.content
        const ids = `${pid},` + this.typeList.map(item=>item.id).join(',')
        this.typeList.unshift({id:ids,name:'全部'})
        this.currentTypeIndex = 0
        this.setGoodsType({id:ids})
      })
    },
    backs(){
      if (this.tabbar){
        uni.switchTab({
          url: '/pages/home/index'
        })
      }else {
        uni.navigateBack()
      }
    },
    init(){
      this.query.page = 1
      this.end = false
      this.goodsList = []
      // this.selectedGoodsList.length = 0
    },
    getGoodsTypeOne() {
      getBasGoodsTypeTree({size: 999, sort: 'seq asc'}).catch(res=>{
        this.goodsOneType = res
        this.goodsOneType.sort((a,b)=>a.seq-b.seq)
        if (this.typeCallbackList.length) {
          let i
          while (i = this.typeCallbackList.shift()) i.bind(this)()
          this.changeType(res[0])
        }else {
          this.changeType(res[0])
        }
      })
    },
    changeType(e){
        const ids = this.getGoodsTypeIds(e)
        this.query.goodsTypeIds = ids
        this.query.goodsBrandIds = ''
        this.getBrand(ids)
    },
      getGoodsTypeIds(goodsType){
          let ids = ''
          if (goodsType.children && goodsType.children.length){
              for (let tp of goodsType.children){
                  ids+=this.getGoodsTypeIds(tp)
              }}
          return `${goodsType.id},${ids}`
    },
    setGoodsType(e){
        if (this.query.goodsBrandIds !== e.id){
            this.query.goodsBrandIds = e.id
        this.init()
        this.onGet()
      }
    },
      getBrand(goodsTypeIds){
          getBasGoodsBrandS({size:999,goodsTypeIds}).catch(res=>{
              this.brandList = res.content
              this.brandList.unshift({id:'',name:'全部'})
              this.init()
              this.onGet()
          })
      },
    upstock(){
      getApp().globalData.addstocklist.length = 0
      this.$forceUpdate()
    },
    addGoods(val){
      this.selectedGoodsList.push(val)
      const app = getApp()
      this.close()
    },
    addstock(val){
      console.log(val,'商品',this.addstocklist);
      const goods=this.addstocklist.map(item=>{
        return item.goodsId
      })
      const goodsid =goods.indexOf(val.goodsId)
      if (goodsid!==-1) {
        this.addstocklist[goodsid].boxNum+=val.boxNum
        this.addstocklist[goodsid].mainNum+=val.mainNum
      }else{
        this.addstocklist.push(val)
      }
      const app = getApp()
      this.$set(app.globalData,'addstocklist',this.addstocklist)
      this.close()
    },
    queryData(){
      this.query.page++
      this.onGet()
    },
    setCategory(index){
      this.goodsTypeIndex = index
      this.showCategoryBox = false
    },
    subPromotionList(list){
      this.selectedGoodsList.push(...list)
    },
    selectGoods(e){
      this.currentPromotionId = -1
      this.currentGoods = {...e,boxNum:0,mainNum:0}
      this.$refs.popup.open()
      this.mask = true
    },
    close(){
      this.$refs.popup.close()
      this.mask = false
    },
  }

}
</script>

<style lang="scss" scoped>
.shoppingBox{
  .headBackGround{
    width: 100%;
    position: absolute;
    top:0;
    z-index: 0;
    image{
      width: 125%;
      margin-left: -13%;
    }
  }
  .head{
    position: relative;
    z-index: 1;
    .customer{
      color: #ffffff;
      font-size: 36rpx;
      font-weight: 600;
      font-family: PingFangSC;
      margin-top: 80rpx;
      padding-left: 50rpx;
      .down{
        height: 100%;
      }
    }
    .search{
      background-color: #ffffff;
      margin-top: 60rpx;
      height: 80rpx;
      width: 70%;
      border-radius: 80rpx;
      padding-left: 30rpx;
      input{
        height: 100%;
      }
    }
  }
}
.back{
  transform: rotate(90deg);
  width: 80rpx;
  height: 80rpx;
  margin-right: 50rpx;
}
.content{
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 20rpx;
  background-color: rgb(240,240,240);
  z-index: 1;
  .left{
    width: 25%;
    background: white;
  }
  .right{
    width: 75%;
  }
}
.downImage{
  width: 50rpx;
  height: 50rpx;
}
.mask99{
  z-index: 99;
}
</style>
